<template>
	
	<div class="foot-nav-container">

		<el-row class="nav-icon">
			<el-col :span="5">
				<span class="iconfont icon-home"></span>
			</el-col>
			<el-col :span="5">
				<span class="iconfont icon-spool"></span>
			</el-col>

			<el-col :span="4">
				
				<div class="deploy">
					<div class="deploy-inner">
						<span class="iconfont icon-jia"></span>
					</div>
				</div>

			</el-col>

			<el-col :span="5">
				<span class="iconfont icon-msg"></span>
			</el-col>

			<el-col :span="5">
				<span class="iconfont icon-mine"></span>
			</el-col>
		</el-row>
		<el-row class="nav-text">
			<router-link to="HomePage"><el-col :span="5"><span>闲鱼</span></el-col></router-link>
			<el-col :span="5"><span>鱼塘</span></el-col>
			<el-col :span="4"><span>发布</span></el-col>
			<el-col :span="5"><span>消息</span></el-col>
			<el-col :span="5">
				<router-link to="/user/center">
					<span>我的</span>
				</router-link>
			</el-col>
		</el-row>
	</div>

</template>



<script>
	export default {
		name:'footnav',
		data(){
			return {
				msg:'Hi my vue'
			}
		}
	}

</script>


<style scoped>
	
	.foot-nav-container{
		position: fixed;
		bottom: 0;
		left:0;
		width: 100%;
		height: 45px;
		background-color: #fff;
	}

	.nav-text span{
		font-size: 10px;
	}

	.nav-icon {
		line-height: 25px;
		font-size: 1.5em;
		font-weight:bold;

	}

	.nav-icon .el-col{
		height: 25px;
	}

/*	.deploy{

		margin-top: -28px;
		margin-left: auto;
		margin-right:auto;
		background-color: #ffda44;
		border:5px solid #fff;
		height: 40px;
		width: 40px;
		line-height: 40px;
		border-radius: 40px;
	}
*/
	.deploy{
		height: 20px;
		width: 40px;

		border-radius: 50% 50% 0 0/100% 100% 0 0;
		border:1px solid #eee;
		border-bottom: none;
		margin-left:auto;
		margin-right: auto;
		margin-top: -20px;
		background-color: #fff;
	}

	.deploy-inner{
		width: 30px;
		height: 30px;
		background-color: #ffda44;
		margin: 5px auto;
		border-radius: 50%;
	}
</style>